iT邦幫忙

2021 iThome 鐵人賽
DAY 22
0
Mobile Development

雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~系列 第 22 篇

[Day22] swift & kotlin 遊戲篇！(4) 小雞BB-遊戲製作-遊戲畫面排版

13th鐵人賽 kotlin swift error
835 瀏覽

  • 分享至 

  • xImage
    •  

遊戲示意

遊戲 小雞ＢＢ
遊戲 小雞ＢＢ

swift - 遊戲頁面排版

  1. 首先把資源區內的
    swift/egg.png
    swift/eggshell.png
    swift/hat_blue.png
    swift/hat_red.png
    全部拉入 Assets.xcassets內
    遊戲 小雞ＢＢ

  2. 把之前做好的下方白色區塊
    重新設定一個Label屬性 叫 gameFooter
    遊戲 小雞ＢＢ

  3. 依照表格建立元件與設定AutoLayout
    遊戲 小雞ＢＢ
    排出這樣的畫面
    全部都建置在 gameWapper 裏面

    1. gameWapper(View)

      屬性 對齊 設定

      Label| 無 |gameWapper|
      background| 無|Clear Color|
      左| Safe Area |0|
      右| Safe Area |0|
      上| Safe Area |50|
      下| gameFooter |0|

    2. lineWapper(View)

      屬性 對齊 設定

      Label| 無 |lineWapper|
      background| 無|Clear Color|
      左| gameWapper |0|
      右| gameWapper |0|
      上| gameWapper |0|
      下| gameWapper |0|

    3. eggWapperRight(View)

      屬性 對齊 設定

      Label| 無 |eggWapperRight|
      background| 無|Clear Color|
      Width| 無 |110|
      Height| 無 |130|
      Horizontally in Container| 無 |100|
      上| Safe Area |30|

      1. egg(ImageView)

        屬性 對齊 設定

        Label| 無 |egg|
        image| 無 |egg|
        Width| 無 |108|
        Height| 無 |128|
        Horizontally in Container| eggWapperRight |0|
        Vertically in Container| eggWapperRight |0|

      2. Eggshell right(ImageView)

        屬性 對齊 設定

        Label| 無 |Eggshell right|
        image| 無 |eggshell|
        Width| 無 |164|
        Height| 無 |68|
        Horizontally in Container| eggWapperRight |0|
        Vertically in Container| eggWapperRight |-20|

    4. eggWapperLeft(View)

      屬性 對齊 設定

      Label| 無 |eggWapperLeft|
      background| 無|Clear Color|
      Width| 無 |110|
      Height| 無 |130|
      Horizontally in Container| 無 |-100|
      上| Safe Area |30|

      1. egg(ImageView)

        屬性 對齊 設定

        Label| 無 |egg|
        image| 無 |egg|
        Width| 無 |108|
        Height| 無 |128|
        Horizontally in Container| eggWapperRight |0|
        Vertically in Container| eggWapperRight |0|

      2. Eggshell right(ImageView)

        屬性 對齊 設定

        Label| 無 |Eggshell left|
        image| 無 |eggshell|
        Width| 無 |164|
        Height| 無 |68|
        Horizontally in Container| eggWapperLeft |0|
        Vertically in Container| eggWapperLeft |-20|

    5. Hat blue(ImageView)

      屬性 對齊 設定

      Label| 無 |Hat blue|
      image| 無 |hat_blue|
      Width| 無 |90|
      Height| 無 |29|
      Horizontally in Container| 無 |-100|
      下| gameWapper.Bottom |20|

    6. Hat red(ImageView)

      屬性 對齊 設定

      Label| 無 |Hat red|
      image| 無 |hat_red|
      Width| 無 |90|
      Height| 無 |29|
      Horizontally in Container| 無 |100|
      下| gameWapper.Bottom |20|

    7. Cloud(ImageView)

      屬性 對齊 設定

      Label| 無 |Cloud|
      image| 無 |cloud.fill|
      Height| 無 |313|
      左| gameWapper |0|
      右| gameWapper |0|
      下| gameWapper.Bottom |40|
      版面排完摟～
      遊戲 小雞ＢＢ
      這樣遊戲所需版面就排完了
      中間遊戲用AutoLayout排完後
      各尺寸的手機都可以正常顯示了

kotlin - 遊戲頁面排版

  1. 首先把資源區內的
    kotlin/egg.png
    kotlin/eggshell.png
    kotlin/hat_blue.png
    kotlin/hat_red.png
    kotlin/cloud.png
    全部拉入 drawable 內
    遊戲 小雞ＢＢ

  2. 把之前做好的下方白色區塊
    重新設定一個id屬性 叫 gameFooter
    然後依照表格建立元件與設定AutoLayout
    遊戲 小雞ＢＢ
    排出這樣的畫面
    除了gameWapper本人外
    其他都包進去 gameWapper 內

    1. gameWapper(ConstraintLayout)

      屬性 對齊 設定

      id| 無 |gameWapper|
      layout_width| 無 |0dp|
      layout_height| 無 |0dp|
      Start -> StartOf| parent |0dp|
      End -> EndOf| parent |0dp|
      Top -> TopOf| parent |30dp|
      Bottom -> BottomOf gameFooter| gameFooter |0dp|

    2. lineWapper(ConstraintLayout)

      屬性 對齊 設定

      id| 無 |lineWapper|
      layout_width| 無 |0dp|
      layout_height| 無 |0dp|
      Start -> StartOf| parent |0dp|
      End -> EndOf| parent |0dp|
      Top -> TopOf| parent |0dp|
      Bottom -> BottomOf parent| parent |0dp|

    3. eggWapperRight(ConstraintLayout)

      屬性 對齊 設定

      id| 無 |eggWapperRight|
      layout_width| 無 |80dp|
      layout_height| 無 |100dp|
      Start -> StartOf| parent |200dp|
      End -> EndOf| parent |0dp|
      Top -> TopOf| parent |20dp|

      1. egg_right(ImageView)

        屬性 對齊 設定

        id| 無 |egg_right|
        srcCompat| 無 |@drawable/egg|
        layout_width| 無 |wrap_content|
        layout_height| 無 |wrap_content|
        Start -> StartOf| parent |0dp|
        End -> EndOf| parent |0dp|
        Top -> TopOf| parent |0dp|
        Bottom -> BottomOf parent| parent |0dp|

      2. eggshell_right(ImageView)

        屬性 對齊 設定

        id| 無 |eggshell_right|
        srcCompat| 無 |@drawable/eggshell|
        layout_width| 無 |wrap_content|
        layout_height| 無 |49dp|
        Start -> StartOf| parent |0dp|
        End -> EndOf| parent |0dp|
        Top -> TopOf| parent |10dp|

    4. eggWapperLeft(ConstraintLayout)

      屬性 對齊 設定

      id| 無 |eggWapperLeft|
      layout_width| 無 |80dp|
      layout_height| 無 |100dp|
      Start -> StartOf| parent |0dp|
      End -> EndOf| parent |200dp|
      Top -> TopOf| parent |30dp|

      1. egg_left(ImageView)

        屬性 對齊 設定

        id| 無 |egg_left|
        srcCompat| 無 |@drawable/egg|
        layout_width| 無 |wrap_content|
        layout_height| 無 |wrap_content|
        Start -> StartOf| parent |0dp|
        End -> EndOf| parent |0dp|
        Top -> TopOf| parent |0dp|
        Bottom -> BottomOf parent| parent |0dp|

      2. eggshell_left(ImageView)

        屬性 對齊 設定

        id| 無 |eggshell_left|
        srcCompat| 無 |@drawable/eggshell|
        layout_width| 無 |wrap_content|
        layout_height| 無 |49dp|
        Start -> StartOf| parent |0dp|
        End -> EndOf| parent |0dp|
        Top -> TopOf| parent |10dp|

    5. hat_blue(ImageView)

      屬性 對齊 設定

      id| 無 |hat_blue|
      srcCompat| 無 |@drawable/hat_blue|
      layout_width| 無 |80dp|
      layout_height| 無 |30dp|
      Start -> StartOf| parent |0dp|
      End -> EndOf| parent |200dp|
      Bottom -> BottomOf parent| parent |20dp|

    6. Hat red(ImageView)

      屬性 對齊 設定

      id| 無 |hat_blue|
      srcCompat| 無 |@drawable/hat_blue|
      layout_width| 無 |80dp|
      layout_height| 無 |30dp|
      Start -> StartOf| parent |200dp|
      End -> EndOf| parent |0dp|
      Bottom -> BottomOf parent| parent |20dp|

    7. Cloud(ImageView)

      屬性 對齊 設定

      id| 無 |cloud|
      srcCompat| 無 |@drawable/cloud|
      layout_width| 無 |300dp|
      layout_height| 無 |250dp|
      Start -> StartOf| parent |0dp|
      End -> EndOf| parent |0dp|
      Bottom -> BottomOf parent| parent |40dp|

版面排完摟～
Android沒有雲朵的系統圖
所以改用自己畫的圖 cloud 代替

遊戲 小雞ＢＢ

這樣遊戲所需版面就排完了
可以試著換看看手機尺寸
都可以正常顯示摟！

kotlin - 討厭的警告

寫到這裡 畫面上開始多滿討厭的警告
遊戲 小雞ＢＢ
其實他們不影響程式正常執行
但未來可能隱藏各種雷
所以我們來消滅他們吧
點選黃色三角形
查看錯誤訊息並修正

文題 處理
ratio相關警告 可忽略,如果有fix可以自動協助修正, 實務上可對設計提出建議
contentDescription相關警告 添加可以考慮添加contentDescription說明, 方便螢幕閱讀器使用
hardcoded string 如果你有輸入文字，會建議你把它做成列舉, 點選FIX編輯器會引導你執行

我們暫時會遇到的大概就以上三種警告
依照提示一一處理
遊戲 小雞ＢＢ
舒服多了～

小碎嘴時間 ヽ(ﾟ´Д`)ﾉﾟ

滿滿的警告訊息～～

剛入程式設計師這行時
常常聽到一句話是這樣的

工程師看到警告訊息 會很自然的忽視(。_。)
看到錯誤訊息 會很自然的貼到Google去找答案 ( ・◇・)？

想想也沒錯啊！！
能把功能寫出來就很爽了
哪管的了警告訊息

錯誤訊息又看不懂在寫什麼～ ಠ▃ಠ
當然去爬文啊～～～

但如果有時間～
真的推薦去修警告拉～

三不五時就遇到現在是警告 升個版本
就掛掉變錯誤訊息了 ⸍⚙̥ꇴ⚙̥⸌

至於錯誤訊息～只能說練習摟
其實認真看 會發現錯誤訊息都可以找到答案了喔～～～ ♫.(◕∠◕).♫


上一篇
[Day21] swift & kotlin 遊戲篇！(3) 小雞BB-遊戲製作-分數與提示排版
下一篇
[Day23] swift & kotlin 遊戲篇！(5) 小雞BB-遊戲製作-Tab功能分頁
系列文
雙平台APP小遊戲開發實作! Swift & Kotlin 攜手出擊~ 共 30 篇
  1. 26
    [Day26] swift & kotlin 遊戲篇！(8) 小雞BB-遊戲製作-歷史紀錄
  2. 27
    [Day27] swift & kotlin 上架篇！(1) 小雞BB-遊戲上架流程-swift
  3. 28
    [Day28] swift & kotlin 上架篇！(2) 小雞BB-遊戲上架流程-kotlin
  4. 29
    [Day29] swift & kotlin 上架篇！(3) 雙平台 上架比較
  5. 30
    [Day30] swift & kotlin 總結！雙平台差異
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙